/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { PureComponent } from 'react';
import { View, Text,Dimensions, StyleSheet, Image, TouchableOpacity } from 'react-native';

const {width} = Dimensions.get('window')


type Props = {
    onPress:Function,
}

export default class MineItemCell extends PureComponent<Props> {

    render() {
        let icon = null;
        if (this.props.image) {
            icon = <Image  source={this.props.image} />
        }

        let subtitle = null;
        if (this.props.subtitle){
            subtitle = <View style={styles.title_right_view}>
                <Text style={styles.title_right}>{this.props.subtitle}</Text>
            </View>

        }

        return (
            <TouchableOpacity style={styles.container} onPress={()=>{this.props.onPress()}}>

                    <View style={[styles.content, this.props.style]}>
                        {icon}
                        <Text style={styles.title_left}>{this.props.title}</Text>
                        <View style={{ flex: 1, backgroundColor: 'blue' }} />
                        {subtitle}
                    </View>

            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        height:49,
    },
    content: {
        height: 48,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 33,
        paddingRight: 33,

    },
    subtitleContainer: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    arrow: {
        width: 14,
        height: 14,
        marginLeft: 5,
    },
    title_left:{
        fontSize:13,
        color:'black',
        marginLeft:18,
    },
    title_right:{
        fontSize:12,
        color:'white',
    },
    title_right_view:{
        backgroundColor:'#7C52E7',
        borderWidth:1,
        borderRadius:8,
        borderColor:'rgba(124, 82, 231, 0.3)',
        paddingLeft:9,
        paddingRight:9,
        height:16,
        justifyContent:'center',
        alignItems:'center',
    },
});

